v
<template>
  <div class="report-container-padding">
    <vxe-grid
      ref="xGrid"
      border
      keep-source
      auto-resize
      sync-resize
      :height="height"
      :loading="listLoading"
      size="small"
      :column-config="{ resizable: true }"
      :export-config="{}"
      :columns="tableColumn"
      align="center"
      :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
      @reset="queryData"
    >
      <template #form>
        <vxe-form ref="queryform" :data="queryForm" title-align="right">
          <vxe-form-item title="审核状态" field="status" :item-render="{}">
            <template #default="{ data }">
              <el-select
                v-model="data.status"
                placeholder="请选择"
                style="width: 210px"
              >
                <el-option
                  v-for="item in dictStore.getDictType('audit_status')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="课题类型" field="type" :item-render="{}">
            <template #default="{ data }">
              <el-select
                v-model="data.type"
                placeholder="请选择"
                style="width: 210px"
              >
                <el-option
                  v-for="item in dictStore.getDictType('topic_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="专业领域" field="subjectArea" :item-render="{}">
            <template #default="{ data }">
              <el-cascader
                v-model="data.subjectArea"
                :options="majorsTrees"
                :props="optionProps"
                placeholder="请选择"
                style="width: 300px"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item title="上报单位" field="reportDepId" :item-render="{}">
            <template #default="{ data }">
              <el-select
                v-model="data.reportDepId"
                placeholder="请选择"
                style="width: 210px"
              >
                <el-option
                  v-for="item in depts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="承担单位"
            field="leadingUnitId"
            :item-render="{}"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.leadingUnitId"
                placeholder="请选择"
                style="width: 210px"
              >
                <el-option
                  v-for="item in depts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="协作单位"
            field="cooperationUnitId"
            :item-render="{}"
          >
            <template #default="{ data }">
              <el-select
                v-model="data.cooperationUnitId"
                placeholder="请选择"
                style="width: 210px"
              >
                <el-option
                  v-for="item in depts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="上报时间" field="reportDate" :item-render="{}">
            <template #default="{ data }">
              <el-date-picker
                v-model="data.reportDate"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="研究开始时间"
            field="researchStartDate"
            :item-render="{}"
          >
            <template #default="{ data }">
              <el-date-picker
                v-model="data.researchStartDate"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="研究结束时间"
            field="researchEndDate"
            :item-render="{}"
          >
            <template #default="{ data }">
              <el-date-picker
                v-model="data.researchEndDate"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </template>
          </vxe-form-item>
          <vxe-form-item title="关键字" field="keywords" :item-render="{}">
            <template #default="{ data }">
              <el-select v-model="data.keywords" placeholder="请选择">
                <el-option label="课题名称" value="name" />
                <el-option label="课题负责人" value="topicLeader" />
                <el-option label="开题设计报告ID" value="openingId" />
                <el-option label="编写人" value="writeUser" />
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="keywordscontent" :item-render="{}">
            <template #default="{ data }">
              <el-input
                v-model="data.keywordscontent"
                placeholder=""
                style="width: 210px"
                clearable
              />
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <vxe-button status="primary" content="搜索" @click="queryData" />
            <vxe-button type="reset" content="重置" />
            <vxe-button
              status="primary"
              content="开题设计报告上报"
              @click="handleSubmit"
            />
            <vxe-button content="导出数据" @click="handleExport" />
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #bottom>
        <el-pagination
          background
          :current-page="queryForm.pageNo"
          :layout="layout"
          :page-size="queryForm.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </template>
      <template #status="{ row }">
        <span>
          {{ dictStore.getDictLabelForValue('audit_status', row.status) }}
        </span>
      </template>
      <template #type="{ row }">
        <span>
          {{ dictStore.getDictLabelForValue('topic_type', row.type) }}
        </span>
      </template>
      <template #externalCooperationRequired="{ row }">
        <span>
          {{
            dictStore.getDictLabelForValue(
              'yes_no',
              row.externalCooperationRequired
            )
          }}
        </span>
      </template>
      <template #operate="{ row }">
        <div>
          <el-link type="primary" @click="handleDetail(row.topicOpeningId)">
            详情
          </el-link>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { useDictStore } from '@/store/modules/dict'
  import { topicOpenPage, topicOpenExport } from '@/api/project/approval/report'
  import { getDictTypeTree } from '@/api/system/dict/dict.data'
  import { getDeptPage } from '@/api/system/dept/index'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    setup() {
      const $baseTableHeight = inject('$baseTableHeight')
      const dictStore = useDictStore()
      const router = useRouter()
      const state = reactive({
        height: $baseTableHeight(0),
        dictStore,
        xGrid: 'xGrid',
        tableColumn: [
          {
            title: '开题设计报告ID',
            field: 'topicOpeningId',
            minWidth: 100,
          },
          {
            title: '审核状态',
            minWidth: 100,
            slots: { default: 'status' },
          },
          {
            title: '课题名称',
            field: 'name',
            minWidth: 100,
          },
          {
            title: '课题负责人',
            minWidth: 100,
            field: 'leader',
          },
          {
            title: '课题类型',
            minWidth: 100,
            slots: { default: 'type' },
          },
          {
            title: '专业领域',
            minWidth: 100,
            field: 'subjectAreaText',
          },
          {
            title: '研究开始时间',
            field: 'researchStartDate',
            width: 160,
            formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
          },
          {
            title: '研究结束时间',
            field: 'researchEndDate',
            width: 160,
            formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
          },
          {
            title: '预计投入经费(万元)',
            field: 'estimatedBudget',
            minWidth: 100,
          },
          {
            title: '是否需要外协',
            slots: { default: 'externalCooperationRequired' },
            minWidth: 100,
          },
          {
            title: '承担单位',
            field: 'leadingUnitName',
            width: 160,
          },
          {
            title: '协作单位',
            field: 'collaboratingUnitName',
            width: 160,
          },
          {
            title: '上报单位',
            field: 'reportingUnitName',
            width: 160,
          },
          {
            title: '上报人',
            field: 'reporterName',
            width: 160,
          },
          {
            title: '记录创建时间',
            field: 'createTime',
            width: 160,
            formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
          },
          {
            title: '操作',
            fixed: 'right',
            width: 100,
            slots: { default: 'operate' },
          },
        ],
        topic_type: [],
        department: [],
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNo: 1,
          pageSize: 10,
        },
        optionProps: {
          value: 'value',
          label: 'label',
          emitPath: false, //只传最后一级id
        },
        majorsTrees: [],
        depts: [],
      })

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }

      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }

      const fetchData = async () => {
        state.listLoading = true
        const params = { ...state.queryForm }
        if (params.keywords) {
          params[params.keywords] = params.keywordscontent
        }
        delete params.keywords
        delete params.keywordscontent
        topicOpenPage(params)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              state['xGrid'].reloadData(res.data.list)
              state.total = res.data.total
              state.listLoading = false
            } else {
              state.listLoading = false
            }
          })
          .catch((err) => {
            state.listLoading = false
          })
      }

      const handleExport = () => {
        const params = { ...state.queryForm }
        if (params.keywords) {
          params[params.keywords] = params.keywordscontent
        }
        delete params.keywords
        delete params.keywordscontent
        topicOpenExport(params)
      }

      const getDepts = () => {
        getDeptPage().then((res) => {
          if (res.code == 0 || res.code == 200) {
            state.depts = res.data || []
          }
        })
      }

      const handleSubmit = () => {
        router.push('/project/approval/report-submit')
      }

      const handleDetail = (id) => {
        router.push(`/project/approval/report-detail?id=${id}`)
      }

      //获取专业领域数据
      const getMajorsTree = () => {
        getDictTypeTree({ parentId: 149 }).then((res) => {
          if (res.code == 0 || res.code == 200) {
            state.majorsTrees = res.data.children || []
          }
        })
      }

      onMounted(() => {
        getMajorsTree()
        getDepts()
        fetchData()
      })

      onBeforeMount(() => {
        window.addEventListener('resize', handleHeight)
      })

      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleHeight)
      })

      const handleHeight = () => {
        state.height = $baseTableHeight(0)
      }

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        handleSubmit,
        handleDetail,
        handleExport,
      }
    },
  })
</script>

<style scoped></style>
